<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Headless</title>
  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../python_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
    td {
      vertical-align: top;
    }
    textarea {
      width: 100%;
      height: 20em;
    }
  </style>
</head>
<body>
  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; Headless</h1>

  <p>This is a simple demo of generating Python code from XML with no graphics.
  This might be useful for server-side code generation.</p>

  <table style="width: 100%">
    <tr>
      <td style="width:50%">
        <textarea id="xml_input">
<xml>
  <block type="controls_if" inline="false" x="20" y="20">
    <mutation else="1"></mutation>
    <value name="IF0">
      <block type="logic_compare" inline="true">
        <field name="OP">EQ</field>
        <value name="A">
          <block type="math_arithmetic" inline="true">
            <field name="OP">MULTIPLY</field>
            <value name="A">
              <block type="math_number">
                <field name="NUM">6</field>
              </block>
            </value>
            <value name="B">
              <block type="math_number">
                <field name="NUM">7</field>
              </block>
            </value>
          </block>
        </value>
        <value name="B">
          <block type="math_number">
            <field name="NUM">42</field>
          </block>
        </value>
      </block>
    </value>
    <statement name="DO0">
      <block type="text_print" inline="false">
        <value name="TEXT">
          <block type="text">
            <field name="TEXT">Don't panic</field>
          </block>
        </value>
      </block>
    </statement>
    <statement name="ELSE">
      <block type="text_print" inline="false">
        <value name="TEXT">
          <block type="text">
            <field name="TEXT">Panic</field>
          </block>
        </value>
      </block>
    </statement>
  </block>
</xml>
        </textarea>
      </td>
      <td>
      </td>
      <td style="width:50%">
        <textarea id="code_output" readonly></textarea>
      </td>
    </tr>
  </table>

  <div style="text-align: center">
    <button onclick="generate()">Generate Python &#10548;</button>
  </div>

  <script>
    function generate() {
      // Parse the XML into a tree.
      var xmlText = document.getElementById('xml_input').value;
      try {
        var xml = Blockly.Xml.textToDom(xmlText)
      } catch (e) {
        alert(e);
        return;
      }
      // Create a headless workspace.
      var workspace = new Blockly.Workspace();
      Blockly.Xml.domToWorkspace(xml, workspace);
      var code = Blockly.Python.workspaceToCode(workspace);
      document.getElementById('code_output').value = code;
    }
  </script>

</body>
</html>
